// 类组件 react class com
import React, { Component } from 'react'

export default class ComBClass extends Component {
    // ComBClass 这个是类名 组件名 文件名
    // Component是基类 ComBClass也是一个类 ComBClass这个类继承了Component中的属性和方法
    // 两种组件的区别 函数组件简单 没有生命周期 没有this 没有状态 适合单纯的ui渲染 性能好
    // 类组件 语法复杂 功能完善 生命周期、this、状态 都有 适用于逻辑较多的场景
    constructor() {
        // 构造函数 作用是初始化
        super();
        // 调用super之后 才能正常使用this
        this.state = {  // state数据 这些数据的变化会引起页面的更新
            // 状态机 用来初始化数据和存储数据 作用类似 vue中的data
            age: 18,
            list: [1,2,3,4]
        }
        // changeAge调用多次的时候，可以在constructor中直接修改this
        this.changeAge = this.changeAge.bind(this)
    }
    // 自己的函数
    changeAge() {
        // this.state.age = 99;  单项绑定 数据的修改不会自动更新页面
        // 点击按钮后 向数组中追加一项
        let arrTem = [...this.state.list];
        arrTem.push(5)
        // setState 会在更新数据后调用render函数 来更新页面
        this.setState({  // 这里会更新dom 耗时长 所以是一个异步函数
            // 这里直接写最后的结果 如果计算过程复杂 可以在前面先计算好
            // 这里只写status中被修改的数据，没写的不会消失也不会更新
            list: arrTem
        }, () => {
            // setState的回调函数 会在更新数据和更新页面之后 自动执行
            console.log(this.state);
        })
    }
    showArg(val1, val2, e) {
        // 传参的演示
        console.log(val1, val2);
        console.log(e);
    }
    render() {
        return (
            <div>
                <p>年龄-{this.state.age}</p>
                <p>{this.state.list}</p>
                {/* 绑定事件 */}
                <button onClick={()=>this.changeAge()}>快进到退休(ES6)</button>
                {/* 通过bind修改this指向-两种方式 */}
                <button onClick={this.changeAge.bind(this)}>快进到退休(ES5)</button>
                <button onClick={this.changeAge}>快进到退休(ES5)</button>
                <hr></hr>
                {/* 绑定事件时可以传参，自定义或者预定义（显式传参 隐式传参） */}
                <button onClick={(event)=>this.showArg(this.state.age, '11-15',event)}>传参(ES6)</button>
                <button onClick={this.showArg.bind(this, this.state.age, '11-15')}>传参(ES5)</button>
            </div>
        )
    }
}
